<template>
  <div class="page-container">
    <BaseTable :data='tableData' :columns="columns">
      <template #name="{ scope }">
        {{ scope.name }}123123123
      </template>
    </BaseTable>
  </div>  
</template>

<script setup>
import BaseTable from '@/components/BaseTable'

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const columns = reactive([
  {
    type: 'index',
    label: '序号',
    width: 100
  },
  {
    prop: 'date',
    label: '日期'
  },
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'address',
    label: '地址'
  },
  {
    prop: 'operate',
    label: '操作',
    buttons: [
      { label: '修改' },
      { label: '删除' }
    ]
  }
])
</script>

<style>

</style>